<template>
  <div class="root">
    <navigationBar/>
    <div class="context">
      <div>订单状态:{{ orderStatus[orderDetail.status] }}</div>
      <table class="preview">
        <tr>
          <td rowspan="7">
            <img class="pimg" :src="orderDetail.productPreview.pimgLink" alt="product Image"/>
          </td>
          <td class="pdec" colspan="2">{{ orderDetail.productPreview.pdec }}</td>
        </tr>
        <tr>
          <td class="key-col">收货人:</td>
          <td class="value-col">{{ orderDetail.consignee.consigneeName }}</td>
        </tr>
        <tr>
          <td class="key-col">联系方式:</td>
          <td class="value-col">{{ orderDetail.consignee.consigneePhone }}</td>
        </tr>
        <tr>
          <td class="key-col">地址:</td>
          <td class="value-col">{{ orderDetail.consignee.consigneeAddress }}</td>
        </tr>
        <tr>
          <td class="key-col">实付价格:</td>
          <td class="value-col">{{ orderDetail.price }}</td>
        </tr>
        <tr>
          <td class="key-col">订单创建时间:</td>
          <td class="value-col">{{ dateFormat(orderDetail.createDate) }}</td>
        </tr>
        <tr v-if="orderDetail.status != 0">
          <td class="key-col">订单完成时间</td>
          <td class="value-col">{{ dateFormat(orderDetail.completeDate) }}</td>
        </tr>
      </table>
      <div class="button-container">
        <span class="enter-button" v-if="orderDetail.status == 2 || orderDetail.status == 3" @click="deleteOrder">删除订单</span>
        <span class="enter-button" v-if="orderDetail.status == 0" @click="payOrder">订单支付</span>
        <span class="enter-button" v-if="orderDetail.status == 0" @click="cancelOrder">订单取消</span>
        <span class="enter-button" v-if="orderDetail.status == 1" @click="confirmReceipt">确认收货</span>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'OrderDetail',
  data() {
    return {
      orderDetail: Object,
      oid: this.$route.query.oid,
      orderStatus: ['待支付', '运输中', '已收货', '已取消']
    }
  },
  methods: {
    dateFormat(date) {
      return new Date(date).toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai'
      })
    },
    cancelOrder() {
      axios.get(this.globalData.apiURL + '/order/cancel?oid=' + this.oid, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          this.$router.go(0) // push('./orderlist')
        })
        .catch(error => {
          console.log(error)
        })
    },
    confirmReceipt() {
      axios.get(this.globalData.apiURL + '/order/complete?oid=' + this.oid, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          this.$router.go(0) // push('./orderlist')
        })
        .catch(error => {
          console.log(error)
        })
    },
    payOrder() {
      axios.get(this.globalData.apiURL + '/order/pay?oid=' + this.oid, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          this.$router.go(0) // push('./orderlist')
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteOrder() {
      axios.get(this.globalData.apiURL + '/order/delete?oid=' + this.oid, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          this.$router.push('./orderlist')
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  beforeCreate() {
    this.globalData.User.loadInfo()
  },
  beforeMount() {
    if(this.globalData.User.Token === '' || this.globalData.User.Token === null) {
      this.$router.push({name: 'Connect'})
    }
    axios.get(this.globalData.apiURL + '/order/detail?oid=' + this.oid, {
      headers: {
        Authorization: this.globalData.User.Token
      }
    })
      .then(res => {
        console.log(res)
        if(res.data === null || res.data === '') {
          this.$router.push({name: 'Home'})
        } else {
          this.orderDetail = res.data
        }
      })
      .catch(error => {
        console.log(error)
        this.$router.push({name: 'Home'})
      })
  }
}
</script>

<style scoped>
.root {
  text-align: center;
}
.context {
  margin: 0 auto;
  width: 80vw;
  margin-top: 55px;
}
.consignee {
    border-radius: 12px;
    /*box-sizing: border-box;*/
    border: 3px solid rgb(20, 20, 20);
    cursor: pointer;
    margin: 10px;
    padding: 3px 0 2px 5px;
}
.consignee span {
  padding: 0 5px;
}
.pimg {
  height: 35vh;
}
.pdec {
  font-weight: 800;
  text-align: justify;
}

.key-col {
  width: 20%;
  text-align: right;
}
.value-col {
  text-align: left;
}

.button-container {
  margin-top: 15px;
}

.enter-button {
  user-select: none;
  color: rgb(240, 246, 255);
  margin-top: 25px;
  font-style: normal;
  font-size: large;
  font-weight: 1000;
  padding: 5px 30px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0022ff, #002ead);
}

</style>
